<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>景点管理</title>
    <style>
        /* 隐藏滚动条但可以滚动 */
        body {
            overflow: hidden;
        }
        .container-fluid {
            overflow-y: scroll;
            height: 100vh; /* 高度设置为全屏 */
        }
    </style>
    <script>
        $(document).ready(function() {
            loadPlaces(); // 页面加载时加载景点数据
        });

        function loadPlaces() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/place',
                data: {
                    operation: 'getAllPlaces'
                },
                dataType: 'json',
                success: function(response) {
                    $('#placeTableBody').empty();
                    $.each(response.data, function(index, place) {
                        $('#placeTableBody').append(
                            '<tr>' +
                            '<td>' + place.placeId + '</td>' +
                            '<td>' + place.name + '</td>' +
                            '<td>' + place.description + '</td>' +
                            '<td>' + place.location + '</td>' +
                            '<td>' + place.tickets + '</td>' +
                            '<td>' + place.openHours + '</td>' +
                            '<td><img src="' + place.imageUrl + '" alt="图片" class="img-thumbnail" width="50" height="50"></td>' +
                            '<td>' +
                            '<button onclick="editPlace(this)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editPlaceModal">编辑</button> ' +
                            '<button onclick="deletePlace(' + place.placeId + ')" class="btn btn-danger btn-sm">删除</button>' +
                            '</td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载景点数据出错:', error);
                }
            });
        }

        function addPlace() {
            $('#editPlaceForm')[0].reset();
            $('#editPlaceId').val('');
            $('#editImage').attr('src', ''); // 清空图片预览
            $('#editPlaceModal').modal('show');
        }

        function editPlace(row) {
            var $row = $(row).closest('tr'); // 获取当前行
            var placeId = $row.find('td:eq(0)').text();
            var name = $row.find('td:eq(1)').text();
            var description = $row.find('td:eq(2)').text();
            var location = $row.find('td:eq(3)').text();
            var tickets = $row.find('td:eq(4)').text();
            var openHours = $row.find('td:eq(5)').text();
            var imageUrl = $row.find('td:eq(6) img').attr('src');

            $('#editPlaceId').val(placeId);
            $('#editName').val(name);
            $('#editDescription').val(description);
            $('#editLocation').val(location);
            $('#editTickets').val(tickets);
            $('#editOpenHours').val(openHours);
            $('#editImage').attr('src', imageUrl);
            $('#editImageInput').val(imageUrl);

            $('#editPlaceModal').modal('show'); // 显示模态框
        }

        function uploadImage(fileInput) {
            var formData = new FormData();
            formData.append('file', fileInput.files[0]);

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/file/upload',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#editImage').attr('src', response); // 更新图片预览
                    $('#editImageInput').val(response); // 更新隐藏的图片 URL 输入框
                },
                error: function(xhr, status, error) {
                    console.error('上传图片出错:', error);
                }
            });
        }

        function savePlace() {
            var placeId = $('#editPlaceId').val();
            var name = $('#editName').val();
            var description = $('#editDescription').val();
            var location = $('#editLocation').val();
            var tickets = $('#editTickets').val();
            var openHours = $('#editOpenHours').val();
            var imageUrl = $('#editImageInput').val();

            var operation = placeId ? 'updatePlace' : 'insertPlace';

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/place',
                data: {
                    operation: operation,
                    placeId: placeId,
                    name: name,
                    description: description,
                    location: location,
                    tickets: tickets,
                    openHours: openHours,
                    imageUrl: imageUrl
                },
                dataType: 'json',
                success: function(response) {
                    $('#editPlaceModal').modal('hide');
                    loadPlaces(); // 刷新景点列表
                },
                error: function(xhr, status, error) {
                    console.error('保存景点信息出错:', error);
                }
            });
        }

        function deletePlace(placeId) {
            if (confirm('确定要删除该景点吗？')) {
                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/place',
                    data: {
                        operation: 'deletePlace',
                        placeId: placeId
                    },
                    dataType: 'json',
                    success: function(response) {
                        loadPlaces(); // 刷新景点列表
                    },
                    error: function(xhr, status, error) {
                        console.error('删除景点出错:', error);
                    }
                });
            }
        }
    </script>
</head>
<body>
<div class="container-fluid mt-4">
    <button class="btn btn-success mb-3" onclick="addPlace()">新增景点</button>

    <!-- 景点表格 -->
    <table id="placeTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>描述</th>
            <th>位置</th>
            <th>门票</th>
            <th>开放时间</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="placeTableBody">
        <!-- 景点数据将会动态填充在这里 -->
        </tbody>
    </table>
</div>

<!-- 编辑景点的模态框 -->
<div class="modal fade" id="editPlaceModal" tabindex="-1" role="dialog" aria-labelledby="editPlaceModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editPlaceModalLabel">编辑景点</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editPlaceForm">
                    <input type="hidden" id="editPlaceId" name="placeId">
                    <div class="form-group">
                        <label for="editName">名称</label>
                        <input type="text" class="form-control" id="editName" name="name">
                    </div>
                    <div class="form-group">
                        <label for="editDescription">描述</label>
                        <textarea class="form-control" id="editDescription" name="description"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="editLocation">位置</label>
                        <input type="text" class="form-control" id="editLocation" name="location">
                    </div>
                    <div class="form-group">
                        <label for="editTickets">门票</label>
                        <input type="text" class="form-control" id="editTickets" name="tickets">
                    </div>
                    <div class="form-group">
                        <label for="editOpenHours">开放时间</label>
                        <input type="text" class="form-control" id="editOpenHours" name="openHours">
                    </div>
                    <div class="form-group">
                        <label for="editImageFile">图片</label>
                        <input type="file" class="form-control-file" id="editImageFile" name="imageUrl" onchange="uploadImage(this)">
                        <img id="editImage" class="img-thumbnail mt-2" width="100" height="100" src="#" alt="图片预览">
                        <input type="hidden" id="editImageInput" name="imageUrl">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="savePlace()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
